<template>
  <div class="gamedisplaytop" :style="{ backgroundImage: bg }">
    <div class="gsbox">
      <game-swipes></game-swipes>
      <game-show v-on:changList="changList"></game-show>
    </div>
  </div>
</template>

<script>
import { showGameMessage, addVisits } from "../../../network/showGame";
import { addHistory } from "../../../network/userUpdate";
import GameSwipes from "../../../components/swipe/GameSwipes.vue";
import GameShow from "./gameShow";
export default {
  components: { GameSwipes, GameShow },
  name: "GameDisplayTop",

  data() {
    return {
      lists: "",
      bgimg: "",
      bg: "",
    };
  },

  created() {
    this.getId();
  },
  activated() {
    this.getId();
  },
  methods: {
    getId() {
      let gid = window.location.pathname.split("/")[2];
      addVisits(gid).then();
      showGameMessage(gid, this.$Cookie.get("userid")).then((res) => {
        this.lists = res.data.data;
        this.bgimg = this.lists.giBackdrop;
        this.bg =
          "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1)),url(" +
          this.bgimg +
          ")";
      });
      if (
        this.$Cookie.get("userid") != null &&
        this.$Cookie.get("userid") != "null"
      ) {
        addHistory(gid, this.$Cookie.get("userid")).then();
      }
    },

    changList() {
      this.getId();
    },
  },
};
</script>

<style>
.gamedisplaytop {
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}

.gsbox {
  width: 80%;
  margin: 0 auto;
  padding-top: 1.2rem;
  display: flex;
}
</style>